<!-- 
    操作日志 
-->
<template>
    <!-- 整体容器 -->
    <div class="pages">
        <el-container class="page-container">
            <!-- 搜索 -->
            <el-header class="page-header">
                <el-input style="width:200px;margin-right: 20px;" v-model.trim="input" placeholder="请输入管理员ID" clearable/>
                <el-button type="primary" :icon="Search" @click="find">查找</el-button>
            </el-header>
            <el-main class="page-main">
                <!-- 表格 -->
                <div class="main-table">
                    <el-table :data="tableData.data" border style="width: 100%">
                        <el-table-column prop="id" label="日志ID" />
                        <el-table-column prop="adminId" label="管理员ID" />
                        <el-table-column prop="requestId" label="请求ID" />
                        <el-table-column prop="group" label="API分组" />
                        <el-table-column prop="method" label="API方法" />
                        <el-table-column label="操作时间">
                        <template #default="scope">
                                <span v-if="scope.row.gmtCreate">
                                    {{new Date(scope.row.gmtCreate).friendlyTime(1)}}
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页 -->
                <div class="page-pagination">
                    <Pagination v-bind="paginationData" @handle-pagination="emitEntProps"/>
                </div>
                <el-backtop :right="100" :bottom="100" target=".el-main" ref="refBacktop" />
            </el-main>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import { ClassPagination } from '#/index';
import { Search } from '@element-plus/icons-vue';
import { ref, reactive, nextTick } from 'vue';
import { post } from "@/utils/index";
import { ElMessage } from 'element-plus';

const refBacktop = ref();  // 获取组件的实例
const input = ref<string>('');   // input绑定的数据
const targetAdminId = ref<string>('')   // 搜索框提交数据
// 表格数据
const tableData:TypeTableData = reactive({ data: [] });
// 分页数据
let paginationData = reactive(new ClassPagination())
// 查找
const find = ()=>{
    targetAdminId.value = input.value
    paginationData.page = 1
    init()
}
// 操作日志请求数据函数，以函数的形式来包裹
const init = () => {
    post({
        _gp: 'admin.log',
        _mt: 'list',
        targetAdminId: targetAdminId.value,
        page: paginationData.page,
        limit: paginationData.limit
    }).then((res) => {
        if (200 === res.errno) {
            let { items,total } = res.data
            paginationData.total = total    // 获取总页数
            tableData.data = items  // 获取已经处理号的数据
        } else {
            ElMessage.error(res.errmsg)
            tableData.data = []  // 清空表格数组数据
        }
    })
}
// 第一次数据渲染调用
init()
/**
 * 分页组件传递过来的数据
 * @param val
 * page:页数
 * limit:条数
 */
 function emitEntProps(val: { page: number, limit: number }) {
    let paging = paginationData
    paging.page = val.page
    paging.limit = val.limit
    init()
}

</script>
